<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>service详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/js/xkube.js?v=1" charset="utf-8"></script>
    <script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                <legend>基本信息</legend>
            </fieldset>  

              <button class="layui-btn" id="EditYamlBtn">yaml编辑</button>
              <button class="layui-btn" id="YamlBackup">yaml备份</button>
              <button class="layui-btn layui-btn-danger" id="DelBtn">删除</button>

              <br><br>

              <blockquote class="layui-elem-quote layui-quote-nm">
                  <table class="layui-table" lay-even="" lay-size="lm">
                    <colgroup>
                      <col width="150">
                      <col width="400">
                      <col width="150">
                      <col>
                    </colgroup>
                    <tbody>
                      <tr>
                        <td>名称:</td>
                        <td><div id="appNameTitle"></div></td>
                        <td>类型:</td>
                        <td><div id="svcType"></div></td>
                      </tr>
                      <tr>
                        <td>命名空间:</td>
                        <td><div id="nameSpace"></div></td>
                        <td>集群IP:</td>
                        <td><div id="svcIp"></div></td>
                      </tr>
                      <tr>
                        <td>创建时间:</td>
                        <td><div id="createTime"></div></td>
                        <td>标签:</td>
                        <td><div id="labels"></div></td>
                      </tr>
                      <tr>
                        <td>内部端点:</td>
                        <td><div id="lanEndpoint"></div></td>
                        <td>外部端点:</td>
                        <td><div id="wanEndpoint"></div></td>
                      </tr>
                    </tbody>
                  </table> 
              </blockquote> 

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>端点</legend>
            </fieldset>
            <table class="layui-table" id="currentTableId" lay-filter="currentTableFilter"></table>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>无状态</legend>
            </fieldset>
                <table class="layui-table" lay-even="" lay-size="lm">
                  <colgroup>
                    <col width="160">
                    <col width="200">
                    <col width="160">
                    <col width="250">
                    <col width="150">
                    <col>
                  </colgroup>
                  <thead>
                    <tr>
                      <th>名称</th>
                      <th>标签</th>
                      <th>容器</th>
                      <th>镜像</th>
                      <th>创建时间</th>
                    </tr> 
                  </thead>
                  <tbody>
                    <tr>
                      <td><a href="javascrit:void(0)" color="blue" onclick="toDeployDetail('deploy')"><div style="color:#3399ff" id="deployName"></div></a></td>
                      <td><div id="labelsTitle"></div></td>
                      <td><div id="status"></div></td>
                      <td><div id="imageUrl"></div></td>
                      <td><div id="createTimeDeploy"></div></td>
                    </tr>
                  </tbody>
                </table> 

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>有状态</legend>
            </fieldset>
                <table class="layui-table" lay-even="" lay-size="lm">
                  <colgroup>
                    <col width="160">
                    <col width="200">
                    <col width="160">
                    <col width="250">
                    <col width="150">
                    <col>
                  </colgroup>
                  <thead>
                    <tr>
                      <th>名称</th>
                      <th>标签</th>
                      <th>容器</th>
                      <th>镜像</th>
                      <th>创建时间</th>
                    </tr> 
                  </thead>
                  <tbody>
                    <tr>
                      <td><a href="javascrit:void(0)" color="blue" onclick="toDeployDetail('sts')"><div style="color:#3399ff" id="statefulsetName"></div></a></td>
                      <td><div id="StsLabels"></div></td>
                      <td><div id="StsStatus"></div></td>
                      <td><div id="StsImageUrl"></div></td>
                      <td><div id="StsCreateTime"></div></td>
                    </tr>
                  </tbody>
                </table> 

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>事件</legend>
            </fieldset>
            <table class="layui-table" id="currentTableIdEvent" lay-filter="currentTableFilterEvent"></table>

    </div>
</div>
</body>

<script type="text/html" id="currentTableBar">
          {{#  var clusterId = getQueryString("clusterId"); }}
          {{#  if (clusterId == null) { }}
	        {{#      clusterId = getCookie("clusterId") }}
          {{#  } }}
    <!-- 
      <a href="/page/xkube/podTerminal.html?nameSpace={{ d.nameSpace }}&podName={{ d.podName }}" target="_blank" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-auz"></i>终端1</a>
      <a class="layui-btn layui-btn-sm" lay-event="podDetail"><i class="layui-icon layui-icon-auz"></i>详情</a>
   -->
    <a href="javascript:;" layuimini-content-href="page/xkube/podDetail.html?clusterId={{clusterId}}&nameSpace={{d.nameSpace}}&podName={{d.podName}}" data-title="{{d.podName}}详情" class="layui-btn layui-btn-sm">详情</a>
    <!-- 
    <a class="layui-btn layui-btn-sm" lay-event="podLog">日志</a>
    <a class="layui-btn layui-btn-sm" lay-event="terminal">ssh终端</a>
   -->
</script>

<script>
/**
    function getQueryString(name) {
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      let r = window.location.search.substr(1).match(reg);
      if (r != null) {
          return unescape(r[2]);
      };
      return null;
    };
**/

    function toDeployDetail(obj) {
      var clusterId = getQueryString("clusterId");
      var nameSpace = getQueryString("nameSpace");
      var serviceName = getQueryString("serviceName");
      if ( obj == "deploy" ) {
        layui.use(['miniTab'], function () {
          var miniTab = layui.miniTab;
          miniTab.openNewTabByIframe({
              href:"page/xkube/deployDetail.html?clusterId="+clusterId+"&nameSpace="+nameSpace+"&deployName="+serviceName,
              title: serviceName+"详情", //serviceName和deployName一样的情况才适用
          });
        });
      }
      if ( obj == "sts" ) {
        layui.use(['miniTab'], function () {
          var miniTab = layui.miniTab;
          miniTab.openNewTabByIframe({
              href:"page/xkube/stsDetail.html?clusterId="+clusterId+"&nameSpace="+nameSpace+"&statefulsetName="+serviceName,
              title: serviceName+"详情", //serviceName和statefulsetName一样的情况才适用
          });
        });        
      }
    }

    layui.use(['form', 'table','miniTab'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
            miniTab = layui.miniTab,
            miniTab.listen();

        var resType = "deploy";
        var serviceName = getQueryString("serviceName");
        var svcIp = getQueryString("svcIp")
        if (svcIp == "None"){
          resType = "sts"
        }
        $('#appNameTitle').html(serviceName);

        $('#DelBtn').on("click",function(){
            layer.confirm('确定删除'+serviceName+'?', {icon: 3, title:'提示',yes: function(index){
        			  $.ajax({
        			   url: "/xkube/svc/v1/Del"+location.search,
        			   type: "GET",
                 data: JSON.stringify(bodystr),
                 dataType: "json",
        			   success: function (resp) {
        					  if (resp.code == 0 ) {
                      layer.msg('删除成功', {icon: 1});
                    }else{
                      layer.msg(resp.msg,{icon:2});
                    }
        				  }
        		    });
              },
              cancel: function(index, layero){ 
                    layer.close(index);
              } 
            });
        });

        $('#EditYamlBtn').on("click",function(){
                layer.open({
                    title: 'yaml',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['45%', '92%'],
                    content: '/page/xkube/serviceYaml.html'+location.search,
                });
        });

        $('#YamlBackup').on("click",function(){
              miniTab.openNewTabByIframe({
                  href:'page/xkube/yamlBackup.html'+location.search+"&resType=service"+"&resName="+serviceName,
                  title:serviceName+"备份",
              }); 
        });

        //detai详细
        $.get('/xkube/svc/v1/Detail' + location.search, function (resp) {
  				  if (resp.ingressName != '' ) {
                //console.log(resp);
                //详细信息
                var serviceName = resp.serviceName;
                $('#serviceName').html(serviceName);
  
                var nameSpace = resp.nameSpace;
                $('#nameSpace').html(nameSpace);

                var labels = resp.labels;
                $('#labels').html(labels);

                var svcType = resp.svcType;
                $('#svcType').html(svcType);

                var svcIp = resp.svcIp;
                $('#svcIp').html(svcIp);

                var createTime = resp.createTime;
                $('#createTime').html(createTime);
  
                var lanEndpoint = resp.lanEndpoint;
                $('#lanEndpoint').html(lanEndpoint);

                var wanEndpoint = resp.wanEndpoint;
                $('#wanEndpoint').html(wanEndpoint);
            }else{
              layer.msg('请重新刷新',{icon:2});
            }
		    });

        //deploy无状态
        $.get('/xkube/deploy/v1/Detail' + location.search+"&deployName="+serviceName, function (resp) {
  				  if (resp.deployName != '' ) {
                //console.log(resp);
                //详细信息
                var deployName = resp.deployName;
                $('#deployName').html(deployName);

                var labels = resp.labels;
                $('#labelsTitle').html(labels);

                var status = resp.status;
                $('#status').html(status);

                var createTime = resp.createTime;
                $('#createTimeDeploy').html(createTime);
  
                var imageUrl = resp.imageUrl;
                $('#imageUrl').html(imageUrl);

            }else{
                var deployName = "无符合条件记录";
                $('#deployName').html(deployName);
            }
		    });

        //sts有状态
        $.get('/xkube/sts/v1/Detail' + location.search+"&statefulsetName="+serviceName, function (resp) {
  				  if (resp.statefulsetName != '' ) {
                //console.log(resp);
                //详细信息
                
                resType = "sts";
                
                var statefulsetName = resp.statefulsetName;
                $('#statefulsetName').html(statefulsetName);

                var labels = resp.labels;
                $('#StsLabels').html(labels);

                var status = resp.status;
                $('#StsStatus').html(status);

                var createTime = resp.createTime;
                $('#StsCreateTime').html(createTime);
  
                var imageUrl = resp.imageUrl;
                $('#StsImageUrl').html(imageUrl);
            }else{
                var statefulsetName = "无符合条件记录";
                $('#statefulsetName').html(statefulsetName);

            }
		    });


        table.render({
            elem: '#currentTableId',
            url: '/xkube/pod/v1/List' + location.search+"&resName="+serviceName+"&resType="+resType,
            //toolbar: '#toolbarDemo',
            //editTrigger: 'dblclick',
            //defaultToolbar: ['filter'],
            cols: [[
                {field: 'podName', title: '名称'},
                {field: 'imgUrl', title: '镜像',hide:true},
                {field: 'podPhase', title: '状态',width:100,templet: '#limitEnableTpl'},      
                {field: 'restartCount',width:100,title: '重启次数'},                          
                {field: 'podIp',title: 'podIp',width:120,sort: true},
                {field: 'hostIp',width:120,title:'节点IP'},  
                {field: 'nodeName',title:'节点名称',edit:true,hide:true},               
                {field: 'createTime',width:180, title: '创建时间'},
                {title: '操作', minWidth:200, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [25, 50, 100],
            limit: 15,
            page: false
        });

        //事件列表
        table.render({
            elem: '#currentTableIdEvent',
            //url: '/xkube/event/v1/List' + location.search+"&kind=Ingress&objName="+ingressName,
            url: '/xkube/event/v1/List' + location.search+"&kind=Service&objName="+serviceName,
            //toolbar: '#toolbarDemo',
            //editTrigger: 'dblclick',
            //defaultToolbar: ['filter'],
            cols: [[
                {field: 'eventType', width: 130,title: '类型', sort: true},
                {field: 'kind', width: 120,title: '对象', sort: true},
                {field: 'objName', width: 180,title: '名称', sort: true},                                
                {field: 'message',title: '消息', sort: true},
                {field: 'reason', title: '原因',width: 200, sort: true},
                {field: 'createTime', width:180, title: '创建时间',hide:true},
            ]],
            limits: [25, 50, 100],
            limit: 15,
            page: false
        });

    });
</script>
</html>